<!-- eslint-disable vue/multi-word-component-names -->
<template>

  <div>

    <div class="menu">

      <div class="menu-left">

        <ul>

          <li class="menu-item" v-for="(menu,index) in menus" :key="index" :class="{current: index === currentIndex}" @click="clickList(index)" ref="menuList">

            <p class="text">{{ menu.name }}</p>
          
          </li>

        </ul>

      </div>

      <div class="menu-right" ref="itemList">

        <ul>
      
          <li class="cate" v-for="(menu, index1) in menus" :key="index1">
      
            <h4 class="cate-title">{{ menu.name }}</h4>
      
            <ul class="cate-item">
      
              <li v-for="(item, index2) in menu.sub" :key="index2">
      
                <a href="#" class="cate-item-wrapper">
                  
                  <router-link class="cate-item-wrapper" :to="{name: 'goods_list', params: {category_id: item.id}}">
                  <div class="cate-item-img">
      
                    <img :src="item.image" alt="">
      
                  </div>
      
                  <span>{{ item.name }}</span>
                </router-link>
                </a>
      
              </li>
      
            </ul>
      
          </li>
          <li class="cate-bottom"></li>
        </ul>
      </div>

    </div>
    </div>

  
</template>
<script>

import BScroll from 'better-scroll'

export default {

  data () {

    return {

      menus: [],
      rightLiTops: [], // 右菜单每项的高度
      
    scrollY: 0        // 记住右菜单的滚动距离


    }

  },
  computed: {

currentIndex () {

  // 当 scrollY 发生改变时，修改左菜单的激活项

  const {scrollY, rightLiTops} = this

  // 从右菜单中查找元素，返回元素索引

      return rightLiTops.findIndex((top, index) => {
        if (index === rightLiTops.length - 2) {

return true

}

    if (scrollY >= top && scrollY < rightLiTops[index + 1]) {

      this._initLeftScroll(index)
      return true

    }

  })

}

},
  methods: {

    // 初始化右边菜单的高度

    _initRightHeight() {
      let itemArray = []

      let top = 0

      itemArray.push(top)

      let allList = this.$refs.itemList.getElementsByClassName('cate')

      // 将 allList 转换为普通数组进行遍历，记录每个元素的高度

      Array.prototype.slice.call(allList).forEach(li => {

        top += li.clientHeight

        itemArray.push(top)

      })
      let bottom = this.$refs.itemList.getElementsByClassName('cate-bottom')[0]
     bottom.style.height = this.$refs.itemList.clientHeight / 1.2 + 'px'
      this.rightLiTops = itemArray
     

    },
    clickList (index) {

this.scrollY = this.rightLiTops[index]

this.rightBscroll.scrollTo(0, -this.scrollY)

},

    _initBScroll() {

      this.leftBscroll = new BScroll('.menu-left', {

        click: true,

        mouseWheel: true

      })

      this.rightBscroll = new BScroll('.menu-right', {

        click: true,

        mouseWheel: true,
        probeType: 3  // 实时派发scroll事件

      })
      this.rightBscroll.on('scroll', (pos) => {

this.scrollY = Math.abs(pos.y)

})
      
    
    },
    _initLeftScroll(index) {
      let menu = this.$refs.menuList

let el = menu[index]

// scrollToElement(el, time, offsetX, offsetY, easing)

this.leftBscroll.scrollToElement(el, 300, 0, -100)

}
  },

 


  created () {

    this.$indicator.open({

      text: '加载中'

    })

    this.$http.get('category').then(res => {

      this.$indicator.close()

      this.menus = res.data.data

    })

  },
  watch: {

menus () {

  // $nextTick用来在下次DOM更新循环结束之后执行延迟回调

  this.$nextTick(() => {

    this._initBScroll()    // 初始化better-scroll
    this._initRightHeight() // 初始化右边菜单的高度
  })

}

},

}

</script>
<style lang="scss" scoped>

ul {

  margin: 0;

  padding: 0;

}

li {

  list-style: none;

}

.menu {

  display: flex;

  position: absolute;

  text-align: center;

  top: 40px;

  bottom: 50px;

  width: 100%;

  overflow: hidden;

  .menu-left {

    flex: 0 0 80px;

    width: 80px;

    background: #f3f5f7;

    .menu-item {

      height: 54px;

      width: 100%;

      .text {

        width: 100%;

        line-height: 54px;

        margin-bottom: 0;

      }

    }

    .current {

      width: 100%;

      background: #fff;

      .text {

        color: red;

      }

    }

  }

  .menu-right {

    flex: 1;

    background: #fff;
    .cate {

      height: 100%;
  
      .cate-title {
  
         margin: 0;
  
        text-align: left;
  
        font-size: 14px;
  
        color: #333;
  
        font-weight: bold;
  
        padding: 10px;
  
      }
  
      .cate-item {
  
        padding: 7px 10px 10px;
  
        display: flex;
  
        overflow: hidden;
  
        flex-flow: row wrap;
  
        li {
  
          width: 33.3%;
  
          .cate-item-wrapper {
  
            .cate-item-img {
  
              width: 100%;
  
              img {
  
                width: 70px;
  
                height: 70px;
  
              }
  
            }
  
            span {
  
              display: inline-block;
  
              font-size: 14px;
  
              color: #333;
  
            }
  
          }
  
        }
  
      }
  
    }

  }

}

</style>